<template>
    <div class="index_container">
        <!-- 头部banner区域 -->
        <Header></Header>
        <!-- 列表区域 -->
        <WebList></WebList>
        <!-- 页脚区域 -->
        <Footer></Footer>
        <!-- 返回顶部 -->
        <div v-show="isShowTop" class="go_top wow animate__animated animate__fadeInRight" data-wow-duration="1s"
            @click="goBack">
            Top
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '../components/Header.vue';
import WebList from '../components/WebList.vue';
import Footer from '../components/Footer.vue';
import { onMounted, ref, nextTick } from 'vue';
// @ts-ignore
import WOW from 'wow.js'// 在vue3中下载的是wow.js|vue2中是wowjs

let isShowTop = ref(false)

onMounted(() => {
    //初始化wow.js(页面滚动加载动画)
    nextTick(() => {   //页面渲染完，在执行
        new WOW().init()
    })
})

window.addEventListener('scroll', () => {
    let currentScrollTop = document.documentElement.scrollTop - (document.documentElement.clientTop || 0);
    if (currentScrollTop > 2500) {
        isShowTop.value = true
    } else {
        isShowTop.value = false
    }
})

const goBack = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
</script>

<style scoped lang="scss">
.index_container {
    .go_top {
        position: fixed;
        z-index: 999;
        bottom: 10%;
        right: 24px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #fff;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s linear;
        user-select: none;

        &:hover {
            background-color: #0B64FF;
            color: #fff;
        }

        &:active {
            transform: scale(0.95);
        }
    }
}
</style>